// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
// 引入组件
import About from "../pages/About.vue";
import Home from "../pages/Home.vue";
import Message from "../pages/Message.vue";
import News from "../pages/News.vue";
import Detail from '../pages/Detail.vue'

// 创建一个路由器（简写）
export default new VueRouter({
  routes: [
    {
      name:'guanyu',
      path: "/about",
      component: About,
    },
    {
      path: "/home",
      component: Home,
      children: [ //通过children配置子级路由
        {
          path: "news", //此处一定不要写：/news
          component: News,
        },
        {
          path: "message", //此处一定不要写：/message
          component: Message,
          children:[
            {
              name:'xiangqing',
              path:'detail',
              component:Detail,

              // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
              // props:{a:1,b:'你好'}

              // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
              // props:true

              // props的第三种写法，值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
              props($route){
                return {
                  id:$route.query.id,
                  title:$route.query.title
                }
              }

              // 第三种写法优化写法（连续解构赋值）
              // 第一次解构({query})
              // 第二次解构({query:{id,title}})
              /* props({query:{id,title}}){
                return {
                  id,
                  title
                }
              } */

            }
          ]
        },
      ],
    },
  ],
});

// 创建并暴露一个路由器（全写）
/* const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

// 暴露一个路由器（默认暴露）
export default router */
